%flex-row-center {
    display: flex;
    align-items: center;
}
%flex-column-center {
    display: flex;
    flex-direction: column;
}
$colors: (
    0: (
        selectColor: rgba(49, 52, 63, 1),
    ),
    1: (
        selectColor: rgba(74, 58, 255, 1),
    ),
    2: (
        selectColor: rgba(150, 45, 255, 1),
    ),
    3: (
        selectColor: rgba(218, 95, 221, 1),
    ),
    4: (
        selectColor: rgba(41, 188, 208, 1),
    ),
    5: (
        selectColor: rgba(53, 216, 238, 1),
    ),
    6: (
        selectColor: rgba(255, 182, 96, 1),
    ),
    7: (
        selectColor: rgba(255, 213, 131, 1),
    ),
    8: (
        selectColor: rgba(224, 198, 253, 1),
    ),
    9: (
        selectColor: rgba(204, 210, 222, 1),
    )
);
$keyColor: map-keys($colors);
@for $c from 1 through length($keyColor) {
    $name: nth($keyColor, $c);
    $currentColor: map-get($colors, $name);
    .bg-color-#{$name} {
        background-color: map-get($currentColor, "selectColor");
    }
}
.vulnerability-type-pie-container {
    @extend %flex-column-center;
    flex: 1;
    .vulnerability-type-pie {
        height: 240px;
        width: 100%;
    }
    .vulnerability-type-pie-list {
        @extend %flex-column-center;
        gap: 4px;
        .vulnerability-type-pie-list-item {
            @extend %flex-row-center;
            justify-content: space-between;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            opacity: 0.3;
            gap: 8px;
            &:hover {
                background-color: var(--Colors-Use-Neutral-Bg);
            }
            .vulnerability-type-pie-list-item-name {
                @extend %flex-row-center;
                gap: 4px;
                flex: 1;
                overflow: hidden;
            }
            .vulnerability-type-pie-list-item-radius {
                width: 8px;
                height: 8px;
                border-radius: 3px;
                flex-shrink: 0;
            }
        }
        .vulnerability-type-pie-list-item-selected {
            opacity: 1;
        }
    }
}
